import { useState } from 'react';
import { Swiper, SwiperSlide } from 'swiper/react';
import { bannerType, locationType } from '../types';
import { useNavigate } from 'react-router-dom';

type BannerPropType = {
  location: locationType | undefined;
  banners: bannerType | undefined;
}
const Banner = (props: BannerPropType) => {
  const [page, setPage] = useState(1);
  const { location, banners } = props
  const navigate = useNavigate()

  function handleLocationClick() {
    navigate('/nearby')
  }

  function handleSearchClick() {
    if (location) navigate(`/search/${location.id}`)
  }
  return (
    <div className="banner">
      <h3 className='location' onClick={handleLocationClick}>
        <span className='iconfont'>&#xe635;</span>
        {location?.address || ''}
      </h3>
      <div className='search' onClick={handleSearchClick}>
        <span className='iconfont'>&#xe62e;</span>
        请输入你需要搜索的内容
      </div>
      <div className='swiper-area'>
        <Swiper
          spaceBetween={0}
          slidesPerView={1}
          onSlideChange={(e: any) => setPage(e.activeIndex + 1)}
        >
          {
            (banners || []).map(item => {
              return (
                <SwiperSlide key={item.id}>
                  <div className='swiper-item'>
                    <img className='swiper-item-img' src={item.imgUrl} alt='轮播图' />
                  </div>
                </SwiperSlide>
              )
            })
          }
        </Swiper>
        <div className='pagination'>{page}/{banners?.length || 0}</div>
      </div>
    </div>
  )
}

export default Banner